<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>01.transitions</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
        <link
            href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.css"
            rel="stylesheet"
        />
        <link
        href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css"
        rel="stylesheet"
       />
        <style>
            .fade-enter {
                opacity: 0;

            }
            .fade-enter-active {
                transition: opacity 1s;   
                
            }
            .fade-leave {
                opacity: 1;
            }
            .fade-leave-active { 
                transition: opacity 1s;
                opacity: 0;
            }
            .slide-enter {
                opacity: 0;
            }
            .slide-enter-active {
                transition: opacity 1s;
                animation:slide-in 1s;
            }
            .slide-leave-active {
                opacity: 1;
                animation: slide-out 1s ease;
            }
            @keyframes slide-in {
                from {
                    transform: translateY(20px);
                }
                to {
                    transform: translateY(0);
                }
            }

            @keyframes slide-out {
                from {
                    transform: translateY(0);
                }
                to{
                    transform:translateY(20px);
                }
            }

        </style>
    </head>

    <body>
        <div id="app">
            <button class="btn btn-primary" @click="show = !show">
                Show Alert
            </button>
            <!-- TODO:transition动画的尝试，多个元素的动画的测试 -->
            {{selectTransition}}
            <select v-model="selectTransition">
                <option value="fade">fade</option>
                <option value="slide">slide</option>
            </select>
            <transition :name="selectTransition" appear type="animation">
                <div class="alert alert-info" 
                v-show="show">This is some info</div>

            </transition>

            <transition enter-to-class ='animate__animated animate__bounce' 
                        leave-to-class="animate__animated animate__shakeX"
                        appear
            >
                <div class="alert alert-info" v-show="show">
                    This is some info
                </div>
            </transition>
        <script type="text/javascript">
            new Vue({
                el: '#app',
                data: {
                    show: true,
                    selectTransition: 'fade',
                },
            });
        </script>
    </body>
</html>
